<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>高度不确定时的展开动画</title>
		<style>
			.box {
				border: #7FFFD4 1px solid;
			}

			#content {
				transition: max-height 1s;
				max-height: 0;
				overflow: hidden;
			}

			.link {
				color: salmon;
				cursor: pointer;
				text-decoration: underline;
				user-select: none;
			}

			.link:hover+#content {
				max-height: 666px;
			}
		</style>
	</head>
	<body>
		<a href="../index.html">返回</a>
		<div class="box">
			<a class="link">展开</a>
			<div id="content"></div>
		</div>
	</body>
	<script src="../../utils.js"></script>
	<script>
		const content = document.querySelector("#content");
		const data = new Data(function(n) {
			content.innerHTML = getContent(n);
		}, 3000, 100, 400);

		function getContent(n) {
			var str = '';
			for (let i = 0; i < n; i++) {
				str += "田"
			}
			return str;
		}
		data.getData()
	</script>
</html>
